<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>烟花</title>
    <style media="screen">
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 800px;
            height: 600px;
            position: relative;
            margin: 100px auto;
            background: #000000;
            border: 2px solid red;
            overflow: hidden;
        }

        .ball {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    //定位元素
    function fun() {
        this.box = document.querySelector('#box')
        this.move()
        this.autoplay()
        // this.bomb()
        // this.left = 0
        // this.top = 0
    }
    //给构造函数的原型定义一个函数：
    /*
     *创建div标签的函数 
    */
    fun.prototype.createDiv = function () {
        var oDiv = document.createElement('div')
        oDiv.className = 'ball'
        oDiv.style.background = "#" + Math.round(parseInt('ffffff', 16) * Math.random()).toString(16).padStart(6, '0')
        this.box.appendChild(oDiv)
        return oDiv
    }
    //给构造函数的原型定义一个函数
    /**
     * 移动div的函数
    */
    fun.prototype.move = function () {
        var self = this
        this.box.onclick = function (e) {
            var e = e || window.event
            var fire_f = self.createDiv()
            fire_f.style.left = e.offsetX - fire_f.offsetWidth / 2 + "px"
            $(fire_f).animate({
                top: e.offsetY - fire_f.offsetHeight / 2 + "px"
            }, 2000, function () {
                fire_f.remove()
                self.bomb(e.offsetX, e.offsetY)
            })
        }
    }
    //给构造函数的原型定义一个函数
    /**
     * 当div移动到了目标位置，就进行爆炸
    */
    fun.prototype.bomb = function (x, y) {
        var deg = 0
        let r = 100

        for (let l = 0; l < 20; l++) {
            var div = this.createDiv()
            div.style.left = x + "px"
            div.style.top = y + "px"
            deg += 18
            console.log(x, y)
            $(div).animate({
                left: Math.round(Math.cos(Math.PI / 180 * deg) * r) + x,
                top: Math.round(Math.sin(Math.PI / 180 * deg) * r) + y
            }, function () {
                //这里的this就是每个div
                this.remove()
                // 而如果你用div去调用remove的话，只会是最后一个this
            })
        }
    }
    /**
     * 自动放烟花功能
    */
    fun.prototype.autoplay = function () {
        var self = this
        setInterval(function () {
            //  调用点击事件,这样就会有点击触发了，就自动烟花了
            // 定时器这里的this指向的是window
            // {替换点击函数的事件对象：event}
            self.box.onclick({
                offsetX: parseInt(Math.random() * self.box.offsetWidth) + 100,
                offsetY: parseInt(Math.random() * self.box.offsetHeight) + 100
            })
        }, 200)
    }
    var fire = new fun()

</script>

</html>